<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" style="display: flex; justify-content: space-between">
      <span>车辆详情</span>
      <el-button @click="handleBack">返回</el-button>
    </div>
    <div class="top-card">
      <el-image src="" style="width: 100px; height: 100px"></el-image>
      <div class="top-card-right">
        <div style="font-size: 16px;display: flex;justify-content: space-between;">
          <div>
            <span style="font-weight: 600">车架号：</span><span>{{ detailForm.vinNo }}</span>
          </div>
          <!--          <div>-->
          <!--            <span style="font-weight: 600">车辆状态：</span>-->
          <!--            <span>-->
          <!--                {{ selectDictLabel(dict.type.car_business_type, detailForm.businessType) }}-->
          <!--              </span>-->
          <!--          </div>-->
        </div>
        <div>
            <span>{{
                `${detailForm.brandName ? detailForm.brandName : ""}${
                    detailForm.seriesName ? detailForm.seriesName + "/" : ""
                }${detailForm.modelName ? detailForm.modelName + "/" : ""}`
              }}</span>
        </div>
        <div>
          <span>车辆归属：</span><span>{{ detailForm.carDepotName }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'topCarInfo',
  dicts: ["car_business_type"],
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  computed: {},
  watch: {
    value: {
      handler(newValue) {
        if (newValue) {
          this.detailForm = newValue
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      detailForm: {}
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleBack() {
      this.$tab.closePage().then(({visitedViews}) => {
        this.$router.push({
          path: '/clgl/insurance/insureManageList'
        });
      });
    }
  },
};
</script>

<style scoped lang="scss">
.box-card {
  font-size: 14px;
  margin-bottom: 20px;

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 140px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    img {
      display: block;
      width: 200px;
      height: 160px;
    }

    .top-card-right {
      flex: 1;
      margin-left: 20px;
      font-size: 14px;
      line-height: 36px;
    }
  }
}
</style>


